<template>
  <div class="appointment-details">
    <div class="header">
      <div class="title-container">
        <h2 class="page-title">会议详情</h2>
        <el-tag class="status-tag" :type="getMeetStatusType(appointmentData.MeetStatus)">
          {{ getMeetStatusText(appointmentData.MeetStatus) }}
        </el-tag>
      </div>
      <el-button type="primary" @click="goBack" icon="ArrowLeft">返回</el-button>
    </div>

    <el-card class="detail-card" shadow="hover">
      <div class="meeting-header">
        <div class="meeting-title">
          <h3>{{ appointmentData.AppointmentsName }}</h3>
          <div class="meeting-topic">{{ appointmentData.MeetMain }}</div>
        </div>
        <div class="meeting-time">
          <el-icon><Calendar /></el-icon>
          <span>{{ formatDate(appointmentData.CreateTime) }}</span>
          <el-divider direction="vertical" />
          <el-icon><Clock /></el-icon>
          <span>{{ formatOnlyTime(appointmentData.StartTime) }} - {{ formatOnlyTime(appointmentData.EndTime) }}</span>
        </div>
      </div>

      <el-divider />

      <div class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="line-indicator"></div>
            <span>基本信息</span>
          </div>
        </div>

        <div class="info-grid">
          <div class="info-item">
            <div class="info-label"><el-icon><Location /></el-icon> 会议地点</div>
            <div class="info-value">{{ appointmentData.MeetAddr || '未设置' }}</div>
          </div>
          <div class="info-item">
            <div class="info-label"><el-icon><User /></el-icon> 会议主持人</div>
            <div class="info-value">{{ appointmentData.MeetPeople || '未设置' }}</div>
          </div>
          <div class="info-item full-width">
            <div class="info-label"><el-icon><UserFilled /></el-icon> 参会人员</div>
            <div class="info-value">
              <div class="participants">
                {{ appointmentData.JoinPeople || '暂无参会人员' }}
              </div>
            </div>
          </div>
          <div class="info-item full-width">
            <div class="info-label"><el-icon><Document /></el-icon> 会议内容</div>
            <div class="info-value content-box">
              {{ appointmentData.MeetDesc || '暂无会议内容' }}
            </div>
          </div>
        </div>
      </div>

      <div v-if="appointmentData.MeetRemote" class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="line-indicator"></div>
            <span>线上会议信息</span>
          </div>
        </div>

        <div class="online-meeting-info">
          <div class="info-item full-width">
            <div class="info-label"><el-icon><Link /></el-icon> 线上地址</div>
            <div class="info-value">
              <a class="meeting-link" :href="onlineMeetingUrl" target="_blank">{{ onlineMeetingUrl }}</a>
              <el-button size="small" type="primary" @click="copyLink">复制链接</el-button>
            </div>
          </div>
          <div v-if="appointmentData.MeetPassphrase" class="info-item">
            <div class="info-label"><el-icon><Phone /></el-icon> 会议电话</div>
            <div class="info-value">{{ appointmentData.AdminTel || '027-81234567-1' }}</div>
          </div>
        </div>
      </div>

      <div v-if="appointmentData.MeetStatus === 2" class="section">
        <div class="section-header">
          <div class="section-title">
            <div class="line-indicator"></div>
            <span>会议附件</span>
          </div>
        </div>

        <div class="attachment-list">
          <div class="attachment-item">
            <el-icon><Document /></el-icon>
            <a href="javascript:void(0);" class="attachment-link">会议附件.zip</a>
            <el-button size="small" type="primary" plain>下载</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Calendar, Clock, Location, User, UserFilled, Document, Link, Phone } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();

// 默认数据，用于初始化或者API请求失败时显示
const defaultData = {
  AppointmentsId: 0,
  AppointmentsName: '未知会议',
  AppointmentsTemplate: 0,
  MeetMain: '未知主题',
  MeetManagerId: 0,
  MeetPeople: '未知',
  CreateTime: new Date(),
  StartTime: new Date(),
  EndTime: new Date(),
  JoinPeople: '未知',
  MeetDesc: '无会议内容',
  MeetSign: false,
  MeetPassphrase: false,
  MeetMessage: false,
  MeetRemote: false,
  MeetStatus: 0,
  MeetName: '未知会议室',
  MeetPhoto: '',
  MeetPeopleNum: '0',
  MeetAddr: '未知地址',
  MeetAdmin: '未知管理员',
  AdminTel: '',
  IsBooking: false,
  IsMeetRoom: false
};

// 从sessionStorage获取会议数据
let sessionData = defaultData;
try {
  const storedData = sessionStorage.getItem('appointmentData');
  if (storedData) {
    sessionData = JSON.parse(storedData);
  }
} catch (error) {
  console.error('解析会议数据失败:', error);
}

const appointmentData = ref(sessionData);

// 模拟线上会议地址
const onlineMeetingUrl = computed(() => {
  return 'http://127.0.0.1:32767/start.html#p=%E4%BC%9AAF%A6%F6%83%85&g=1&c=20312324';
});

// 返回上一页
const goBack = () => {
  router.back();
};

// 复制链接
const copyLink = () => {
  navigator.clipboard.writeText(onlineMeetingUrl.value)
    .then(() => {
      ElMessage.success('链接已复制到剪贴板');
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制');
    });
};

// 格式化日期部分（年月日）
const formatDate = (dateTime: string | Date) => {
  if (!dateTime) return '';
  const date = new Date(dateTime);
  return `${date.getFullYear()}年${(date.getMonth() + 1)}月${date.getDate()}日`;
};

// 格式化时间部分（时分）
const formatOnlyTime = (dateTime: string | Date) => {
  if (!dateTime) return '';
  const date = new Date(dateTime);
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 获取会议状态文本
const getMeetStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '未开始';
    case 1:
      return '进行中';
    case 2:
      return '已结束';
    default:
      return '未知状态';
  }
};

// 获取会议状态标签类型
const getMeetStatusType = (status: number) => {
  switch (status) {
    case 0:
      return 'info';
    case 1:
      return 'success';
    case 2:
      return 'warning';
    default:
      return 'info';
  }
};

onMounted(() => {
  if (!sessionStorage.getItem('appointmentData') && route.query.id) {
    console.log('需要通过API获取会议ID:', route.query.id);
  }
});
</script>

<style scoped>
.appointment-details {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-container {
  display: flex;
  align-items: center;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.status-tag {
  margin-left: 12px;
  font-weight: 500;
}

.detail-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.meeting-header {
  padding-bottom: 16px;
}

.meeting-title {
  margin-bottom: 12px;
}

.meeting-title h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.meeting-topic {
  color: #606266;
  font-size: 16px;
}

.meeting-time {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;
  margin-top: 8px;
}

.meeting-time .el-icon {
  margin-right: 4px;
}

.meeting-time span {
  margin-right: 8px;
}

.section {
  margin-top: 24px;
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
}

.line-indicator {
  width: 4px;
  height: 18px;
  background-color: #409eff;
  margin-right: 8px;
  border-radius: 2px;
}

.section-title span {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.full-width {
  grid-column: span 2;
}

.info-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.info-label .el-icon {
  margin-right: 4px;
  font-size: 16px;
}

.info-value {
  font-size: 14px;
  color: #303133;
}

.content-box {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  min-height: 80px;
  white-space: pre-line;
}

.participants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.online-meeting-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.meeting-link {
  color: #409eff;
  text-decoration: none;
  margin-right: 12px;
  word-break: break-all;
}

.meeting-link:hover {
  text-decoration: underline;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.attachment-item .el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: #606266;
}

.attachment-link {
  flex: 1;
  color: #303133;
  text-decoration: none;
}

.attachment-link:hover {
  color: #409eff;
  text-decoration: underline;
}
</style> 